<template>
<!-- 新闻列表 -->
<div class="news">
    <head-usual :title="title" :to="to"></head-usual>
    <mt-navbar v-model="selected" >
        <mt-tab-item id="1"><span>最新新闻</span></mt-tab-item>
        <mt-tab-item id="2"><span>公司新闻</span></mt-tab-item>
        <mt-tab-item id="3"><span>最新干货</span></mt-tab-item>
        <mt-tab-item id="4"><span>家装新闻</span></mt-tab-item>
    </mt-navbar>
    <div class="project-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0" >
    <mt-tab-container v-model="selected" swipeable>
        <mt-tab-container-item id="1" >
           <!-- 最新新闻列表-->
           <div class="news-list">
               <router-link class="news-item" v-for="(item,index) in pagedListData" :key="index" :to="'/news/detail/'+item.id">
                  <div class="news-item-img">
                      <img :src="item.imagepath"/>
                  </div>
                  <p>{{item.title}}</p>
                  <p>{{item.subtitle}}</p>
                  <div>
                      <p>
                          <span>更新时间：</span>
                          <span>{{item.addtime}}</span>
                      </p>
                      <p>
                          <svg class="icon icon-po" aria-hidden="true" >
                              <use xlink:href="#icon-chakan"></use>
                          </svg>
                          <span>{{item.hits}}浏览</span>
                      </p>
                  </div>
               </router-link>
        </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2" >
            <!-- 最新新闻列表-->
           <div class="news-list">
               <router-link class="news-item" v-for="(item,index) in pagedListData" :key="index" :to="'/news/detail/'+item.id">
               <div class="news-item-img">
                   <img :src="item.imagepath"/>
               </div>
               <p>{{item.title}}</p>
               <p>{{item.subtitle}}</p>
               <div>
                   <p>
                       <span>更新时间：</span>
                       <span>{{item.addtime}}</span>
                   </p>
                   <p>
                        <svg class="icon icon-po" aria-hidden="true" >
                            <use xlink:href="#icon-chakan"></use>
                        </svg>
                       <span>{{item.hits}}浏览</span>
                   </p>
               </div>
           </router-link>
        </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
            <!-- 最新新闻列表-->
             <div class="news-list">
               <router-link class="news-item"  v-for="(item,index) in pagedListData" :key="index" :to="'/news/detail/'+item.id">
               <div class="news-item-img">
                   <img :src="item.imagepath"/>
               </div>
               <p>{{item.title}}</p>
               <p>{{item.subtitle}}</p>
               <div>
                   <p>
                       <span>更新时间：</span>
                       <span>{{item.addtime}}</span>
                   </p>
                   <p>
                        <svg class="icon icon-po" aria-hidden="true" >
                            <use xlink:href="#icon-chakan"></use>
                        </svg>
                       <span>{{item.hits}}浏览</span>
                   </p>
               </div>
           </router-link>
        </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="4">
            <!-- 最新新闻列表-->
           <div class="news-list">
                <router-link class="news-item"  v-for="(item,index) in pagedListData" :key="index" :to="'/news/detail/'+item.id">
               <div class="news-item-img">
                   <img :src="item.imagepath"/>
               </div>
               <p>{{item.title}}</p>
               <p>{{item.subtitle}}</p>
               <div>
                   <p>
                      <span>更新时间：</span>
                      <span>{{item.addtime}}</span>
                   </p>
                   <p>
                        <svg class="icon icon-po" aria-hidden="true" >
                            <use xlink:href="#icon-chakan"></use>
                        </svg>
                       <span>{{item.hits}}浏览</span>
                   </p>
               </div>
           </router-link>
        </div>
        </mt-tab-container-item>
    </mt-tab-container>
    </div>
    <div v-show="loading" class="page-infinite-loading">
      <mt-spinner type="fading-circle"></mt-spinner>
      加载中...
    </div>
    <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
    <!-- 底部按钮 -->
    <footer-total></footer-total>
    
</div>
</template>

<script>
import { TabContainer, TabContainerItem } from "mint-ui";
import { GetNewsList } from "@/api/news";
export default {
  data() {
    return {
      selected: "1",
      title: "新闻资讯",
      to:'/',
      pagedListData: [],

      searchCondition: {
        pageindex: 1, //页码
        type: 1 //数据筛选
      },
      loading: false, //是否显示加载中
      allLoaded: false, //加载完毕
      totalpage: 0 //总页码
    };
  },
  created() {
    //   获取最新新闻列表
    this._getNewsList();
  },
  methods: {
    loadMore() {
      //分页加载更多
      if (this.searchCondition.pageindex >= this.totalpage) {
        this.allLoaded = true;
        return;
      }
      this.loading = true;
      setTimeout(() => {
        this.searchCondition.pageindex++;

        GetNewsList(this.searchCondition).then(res => {
          if (res.StatusCode === 200) {
            this.pagedListData = this.pagedListData.concat(res.Data);
          }
        });
        this.loading = false;
      }, 1000);
    },
    // 获取数据
    _getNewsList() {
      this.$indicator.open();
      this.searchCondition.pageindex = 1;
      GetNewsList(this.searchCondition).then(res => {
        if (res.StatusCode === 200) {
          this.pagedListData = res.Data;
          this.totalpage = res.TotalPage;
          this.$indicator.close();
        }
      });
    }
  },
  //监听切换类别触发数据刷新
  watch: {
    selected(val, oldVal) {
      this.searchCondition.type = val;
      this._getNewsList();
    }
  },
};
</script>

<style lang="scss" scoped>
// 最新新闻列表
.news-list {
  background: #f4f4f4;
  padding: 0 12px 10px 12px;
  overflow: hidden;
  margin-top: 2px;
  // 每个新闻
  .news-item {
    padding-bottom: 14px;
    background: #ffffff;
    display: block;
    .news-item-img {
      width: 100%;
      height: 200px;
      margin-top: 10px;
      > img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
      }
    }
    > :nth-child(2) {
      font-size: 16px;
      color: #333333;
      font-weight: bolder;
      margin-top: 14px;
      padding-left: 12px;
    }
    > :nth-child(3) {
      font-size: 14px;
      color: #999999;
      margin-left: 12px;
      margin-right: 12px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eeeeee;
      margin-top: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    > :nth-child(4) {
      padding-left: 12px;
      overflow: hidden;
      font-size: 14px;
      color: #999999;
      margin-top: 14px;
      > p {
        float: left;
      }
      > :first-child {
        float: left;
      }
      > :last-child {
        float: right;
        margin-right: 10px;
        display: flex;
        align-items: center;
        > .icon {
          margin-right: 5px;
          font-size: 18px;
        }
        > span {
         
        }
      }
    }
  }
}
// 设置选中颜色
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 2px solid #fd4f00;
  color: #fd4f00;
  margin-bottom: -2px;
}
// 设置默认字体颜色
.mint-navbar .mint-tab-item {
  color: #282828;
}
</style>
